/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>编辑试卷</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :model="form" ref="form" label-width="200px" v-loading="formLoading" :rules="rules">
      <el-form-item label="试卷用途：" prop="userfor" required>
        <el-select v-model="form.userfor" placeholder="试卷用途">
          <el-option
            v-for="type1 in userfor1"
            :label="type1.key"
            :value="type1.value"
            :key="type1.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="试卷名称：" prop="paperName" required>
        <el-input v-model="form.paperName" />
      </el-form-item>
      <el-form-item label="单选题(分/题)：" prop="singleDefault" required>
        <el-input v-model="form.singleDefault" />
      </el-form-item>
      <el-form-item label="多选题(分/题)：" prop="multipleDefault" required>
        <el-input v-model="form.multipleDefault" />
      </el-form-item>
      <el-form-item label="判断题(分/题)：" prop="judgeDefault" required>
        <el-input v-model="form.judgeDefault" />
      </el-form-item>
      <el-form-item label="填空题(分/题)：" prop="fillDefault" required>
        <el-input v-model="form.fillDefault" />
      </el-form-item>
      <el-form-item label="简答题(分/题)：" prop="shortDefault" required>
        <el-input v-model="form.shortDefault" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          class="link-left"
          style="margin-left: 20px"
          size="mini"
          @click="addQuestion()"
        >添加题目</el-button>
        <el-card class="exampaper-item-box" v-if="this.form.questions.length!==0">
          <el-form-item
            :key="questionIndex"
            :label="'题目'+(questionIndex+1)+'：'"
            v-for="(question,questionIndex) in this.form.questions"
            style="margin-bottom: 15px"
          >
            <el-row>
              <el-col :span="21">
                <div v-if="question.type==1">
                  <div>{{question.title}}</div>
                  <el-radio-group v-model="singleOption">
                    <div v-for="(o,index) in question.optionList" :key="index" class="text item">
                      <el-radio disabled :label="index">{{o.content }}</el-radio>
                    </div>
                  </el-radio-group>
                </div>
                <div v-if="question.type==2">
                  <div>{{question.title}}</div>
                  <el-checkbox-group v-model="mutipleOption">
                    <div v-for="(o,index) in question.optionList" :key="index" class="text item">
                      <el-checkbox disabled :label="index">{{o.content }}</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
                <div v-if="question.type==3">
                  <div>
                    {{question.title}}
                    <el-radio disabled v-model="judgeOption" label="T"></el-radio>
                    <el-radio disabled v-model="judgeOption" label="F"></el-radio>
                  </div>
                </div>
                <div v-if="question.type==4">
                  <div>{{question.title}}</div>
                </div>
                <div v-if="question.type==5">
                  <div>{{question.title}}</div>
                </div>
              </el-col>
              <el-col :span="3">
                <el-button
                  type="text"
                  size="mini"
                  @click="upClick(questionIndex)"
                  v-if="questionIndex !== 0"
                  icon="el-icon-top"
                ></el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="downClick(questionIndex)"
                  v-if="questionIndex !== form.questions.length - 1"
                  icon="el-icon-bottom"
                ></el-button>

                <el-button
                  type="text"
                  size="mini"
                  @click="form.questions.splice(questionIndex,1)"
                  icon="el-icon-delete"
                ></el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-card>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="questionPage.showDialog" width="70%">
      <el-form :model="questionPage.queryParam" ref="queryForm" :inline="true">
        <el-form-item label="题目：">
          <el-input v-model="questionPage.queryParam.title" clearable></el-input>
        </el-form-item>
        <el-form-item label="题型：">
          <el-select v-model="questionPage.queryParam.type" clearable>
            <el-option
              v-for="item in questiontype"
              :key="item.key"
              :value="item.value"
              :label="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="questionPage.listLoading"
        :data="questionPage.tableData"
        @selection-change="handleSelectionChange"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column prop="id" label="Id" width="60px" />
        <el-table-column prop="type" label="题型" width="70px" />
        <el-table-column prop="title" label="题干" show-overflow-tooltip />
      </el-table>
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="pageparm" @call="callFather"></Pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="questionPage.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmQuestionSelect">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import axios from "axios";
export default {
  //model
  data() {
    return {
      user: "",
      singleOption: [],
      mutipleOption: [],
      judgeOption: "T",
      paperId: null,
      userfor1: [
        { key: "测评试卷", value: 1 },
        { key: "模拟试卷", value: 2 },
      ],
      form: {
        id: null,
        userfor: 1,
        paperName: "",
        singleDefault: 0,
        multipleDefault: 0,
        judgeDefault: 0,
        fillDefault: 0,
        shortDefault: 0,
        questions: [],
      },
      formLoading: false,
      rules: {
        userfor: [
          { required: true, message: "请选择试卷用途", trigger: "change" },
        ],
        paperName: [
          { required: true, message: "请输入试卷名称", trigger: "blur" },
        ],
        singleDefault: [{ pattern: /^[1-9]\d*$/, message: "只能输入正整数且不能为0" }],
        multipleDefault: [{ pattern: /^[1-9]\d*$/, message: "只能输入正整数且不能为0" }],
        judgeDefault: [{ pattern: /^[1-9]\d*$/, message: "只能输入正整数且不能为0" }],
        fillDefault: [{ pattern: /^[1-9]\d*$/, message: "只能输入正整数且不能为0" }],
        shortDefault: [{ pattern: /^[1-9]\d*$/, message: "只能输入正整数且不能为0" }],
      },
      questions: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 10,
      },
      questiontype: [
        { key: "请选择", value: 0 },
        { key: "单选", value: 1 },
        { key: "多选", value: 2 },
        { key: "判断", value: 3 },
        { key: "填空", value: 4 },
        { key: "简答", value: 5 },
      ],
      questionPage: {
        multipleSelection: [],
        showDialog: false,
        listLoading: true,
        tableData: [],
        total: 0,
        queryParam: {
          title: "",
          type: null,
        },
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("userdata"));
    let paperid = this.$route.query.id;
    console.log(paperid);
    this.paperId = paperid;
    this.$axios
      .get("http://localhost:8081/Paper/showPaperView", {
        params: {
          id: paperid,
        },
      })
      .then((res) => {
        console.log(res);
        this.form.userfor = res.data.paper.userfor;
        this.form.paperName = res.data.paper.paperName;
        this.form.singleDefault = res.data.paper.singleDefault;
        this.form.multipleDefault = res.data.paper.multipleDefault;
        this.form.judgeDefault = res.data.paper.judgeDefault;
        this.form.fillDefault = res.data.paper.fillDefault;
        this.form.shortDefault = res.data.paper.shortDefault;
        this.form.questions = res.data.questions;
      })
      .catch((err) => {});
  },
  methods: {
    // 上移
    upClick(index) {
      console.log("upClick", index);
      let newArr = this.swapItems(this.form.questions, index, index - 1);
      this.form.questions = newArr;
    },
    // 下移
    downClick(index) {
      console.log("downClick", index);
      let newArr = this.swapItems(this.form.questions, index, index + 1);
      this.form.questions = newArr;
    }, // arr.splice(index2, 1, arr[index])[0] 这个得到是的 被删除的 项 并且原数组 已经得到替换。所以需要将被删除项 设置为上一项的值 //如果解释不是很清楚。自己去控制台 打印 玩玩  （主要是为自己理解做笔记）
    // 上下移动的核心。splice函数 返回的是被删除 项  并且 会改变原数组
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    //获取试题列表
    // getData() {
    // this.$axios
    //   .get("http://localhost:8081/Paper/showQuestionList", {
    //     params: {
    //       startpage: this.pageparm.currentPage,
    //       pagesize: this.pageparm.pageSize,
    //     },
    //   })
    //   .then((res) => {
    //     console.log(res);
    //     this.questionPage.tableData = res.data.list;
    //     this.pageparm.total = res.data.total;
    //     this.questionPage.listLoading = false;
    //   })
    //   .catch((err) => {});
    // },
    // 分页插件事件
    callFather(parm) {
      this.pageparm.currentPage = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.search();
    },
    addQuestion() {
      this.questionPage.showDialog = true;
      this.search();
    },
    handleSelectionChange(val) {
      this.questionPage.multipleSelection = val;
    },
    confirmQuestionSelect() {
      let _this = this;
      console.log(this.questionPage.multipleSelection);
      this.questionPage.multipleSelection.forEach((q) => {
        _this.form.questions.push(q);
        console.log(_this.form.questions);
      });
      this.questionPage.showDialog = false;
    },
    submitForm() {
      let _this = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true;
          this.$axios
            .post("http://localhost:8081/Paper/savePaperQu", {
              user: {
                id: this.user.id,
              },
              paper: {
                id: _this.paperId,
                userfor: _this.form.userfor,
                paperName: _this.form.paperName,
                singleDefault: _this.form.singleDefault,
                multipleDefault: _this.form.multipleDefault,
                judgeDefault: _this.form.judgeDefault,
                fillDefault: _this.form.fillDefault,
                shortDefault: _this.form.shortDefault,
              },
              quList: _this.form.questions,
            })
            .then((res) => {
              if (res.data == "success") {
                _this.$message({
                  type: "success",
                  message: "试卷已编辑",
                });
              }
              _this.$router.push("/exam/paper/paperlist");
            })
            .catch((err) => {
              this.$message.error("试卷编辑失败，请稍后再试！");
              this.formLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    search() {
      // this.pageparm.currentPage=1;
      this.questionPage.listLoading = true;
      this.$axios
        .post("http://localhost:8081/Paper/queryQuestion", {
          startpage: this.pageparm.currentPage,
          pagesize: this.pageparm.pageSize,
          question: {
            title: this.questionPage.queryParam.title,
            type: this.questionPage.queryParam.type,
          },
          questions: this.form.questions,
        })
        .then((res) => {
          this.questionPage.tableData = res.data.list;
          // this.questionPage.tableData.forEach((s) => {
          //   if (s.type == 1) {
          //     s.type = "单选";
          //   } else if (s.type == 2) {
          //     s.type = "多选";
          //   }else if (s.type == 3) {
          //     s.type = "判断";
          //   }else if (s.type == 4) {
          //     s.type = "填空";
          //   }else if (s.type == 5) {
          //     s.type = "简答";
          //   }
          // });
          this.pageparm.total = res.data.total;
          this.questionPage.listLoading = false;
        })
        .catch((err) => {});
      // questionApi.pageList(this.questionPage.queryParam).then(data => {
      //   const re = data.response
      //   this.questionPage.tableData = re.list
      //   this.questionPage.total = re.total
      //   this.questionPage.queryParam.pageIndex = re.pageNum
      //   this.questionPage.listLoading = false
      // })
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 10px 0;
}

.box-card {
  width: auto;
  margin-top: 20px;
}
</style> 
